<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <!-- 单页 -->
    <div class="app-page-padding" style="height:calc(100% - 50px)">
      <div v-loading="pageLoading" style="padding:20px; padding-left:0;">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" size="small" label-width="180px">
          <el-form-item label="输入框：" prop="filed01">
            <el-input v-model="ruleForm.filed01" clearable placeholder="请填写" style="width:100%"></el-input>
          </el-form-item>
          <el-form-item label="数字输入框：" prop="filed02" class="app-input-number-left">
            <el-input-number v-model="ruleForm.filed02" :controls="false" :max="100000000000" placeholder="" style="width:100%"></el-input-number>
          </el-form-item>
          <el-form-item label="级联选择器：" prop="filed21">
            <el-cascader
              v-model="ruleForm.filed21"
              :options="mockCascaderTree"
              style="width:100%"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="时间：" prop="filed22">
            <el-time-picker
              v-model="ruleForm.filed22"
              value-format="HH:mm"
              :picker-options="{
                format: 'HH:mm'
              }"
              placeholder="任意时间点"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item label="下拉选择框：" prop="field03">
            <el-select v-model="ruleForm.field03" placeholder="请选择" clearable style="width:100%">
              <el-option :value="1" label="高管" />
              <el-option :value="2" label="中层" />
              <el-option :value="3" label="基层" />
              <el-option :value="4" label="其它" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期选择框：" prop="field04">
            <el-date-picker v-model="ruleForm.field04" type="date" placeholder="选择日期时间" value-format="yyyy-mm-dd" style="width:100%">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="开始结束日期选择框：" prop="field05">
            <el-date-picker
              v-model="ruleForm.field05"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-mm-dd"
              style="width:100%"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="开关：" prop="field06">
            <el-switch
              v-model="ruleForm.field06"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="按月付费"
              inactive-text="按年付费"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="单选按钮组：" prop="field07">
            <el-radio-group v-model="ruleForm.field07">
              <el-radio :label="3">
                备选项
              </el-radio>
              <el-radio :label="6">
                备选项
              </el-radio>
              <el-radio :label="9">
                备选项
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="单选按钮组：" prop="field08">
            <el-radio-group v-model="ruleForm.field08">
              <el-radio-button label="上海"></el-radio-button>
              <el-radio-button label="北京"></el-radio-button>
              <el-radio-button label="广州"></el-radio-button>
              <el-radio-button label="深圳"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="单选按钮组：" prop="field09">
            <el-checkbox-group v-model="ruleForm.field09">
              <el-checkbox label="复选框 A"></el-checkbox>
              <el-checkbox label="复选框 B"></el-checkbox>
              <el-checkbox label="复选框 C"></el-checkbox>
              <el-checkbox label="禁用" disabled></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="文本框：" prop="filed20">
            <el-input v-model="ruleForm.filed20" type="textarea" rows="4" placeholder="请填写" style="width:100%"></el-input>
          </el-form-item>
          <el-form-item label="" prop="filed20">
            <el-button :loading="loading" type="primary" size="small" class="fa fa-check" @click="validateSubmit(ruleForm)">
              保存
            </el-button>
            <el-button size="small" class="fa fa-reply-all" @click="close">
              关闭
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getData, update } from '@/mock/index'
export default {
  name: 'FormBase',
  data () {
    return {
      // 提交表单loading
      loading: false,
      // 页面加载完成loading
      pageLoading: false,
      // 表单
      ruleForm: {
        filed22: '08:22',
        field09: []
      },
      // 验证
      rules: {
      }
    }
  },
  created () {
    this.initForm()
  },
  methods: {
    initForm () {
      // 用户uuid
      const { uuid } = this.$route.query
      if (uuid) {
        this.uuid = uuid
        this.getDetail(uuid)
      }
    },
    // 获取编辑数据
    async getDetail (uuid) {
      // 模拟详情接口
      const detailData = {
        filed01: '',
        filed02: '',
        filed22: '08:22',
        filed09: []
      }
      this.pageLoading = true
      const res = await getData({ userUuid: uuid }, detailData)
      this.pageLoading = false
      if (res.code === '0000') {
        this.ruleForm = res.data
      }
    },
    // 关闭跳转
    close () {
      this.closeView(this.$route)
    },
    // 验证
    validateSubmit (ruleForm) {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.submit(ruleForm)
        } else {
          return false
        }
      })
    },
    // 提交表单
    async submit (ruleForm) {
      this.loading = true
      // 编辑
      const res = await update(ruleForm)
      this.loading = false

      if (res.code === '0000') {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.jumpRouterView(this.$route, { path: '/user' })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss" scoped>
</style>
